<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String ctx = request.getContextPath();
    request.setAttribute("ctx", ctx);
%>
<html>
<head>
    <title>新增</title>
    <script src="${ctx}/bootstrap/jquery-1.9.1.min.js"></script>
    <script src="${ctx}/bootstrap/jquery.validate.min.js"></script>
    <script src="${ctx}/bootstrap/messages_zh.js"></script>
</head>
<body>
<form action="${ctx}/add.do" enctype="multipart/form-data" method="post">
    <input type="hidden" name="rid" value="${rid}">
    楼盘：<input type="text" name="rname" required value="${region.rname}"><br>
    图片:<input type="file" name="file" required><br>
    三级联动：省<select id="shen" onchange="getshi()" name="sheng.id"></select>市<select id="shi" name="shi.id" onchange="getxian()"></select>县<select id="xian" name="xian.id" onchange="getqu()"></select>
    <br/>
    商圈：<div id="check4"></div>

    <input type="submit" value="新增">
</form>
<script>
    $(function () {
         $("form").validate();//开启表达验证
        //查询省，默认pid=0
        $.post("${ctx}/getByPid.do?pid=0",function (res) {
            for (let x in res) {
                $("#shen").append('<option value="' + res[x].id + '">' + res[x].name + '</option>');
            }
            $("#shen").val("${region.sheng.id}");//回显省
            getshi();//根据省查找市
        })
    })
    //根据选中的省获取市
    function getshi() {
        var pid= $("#shen").val();//获取选中的省的id
        //根据省id，查询省下的所有市
        $.post("${ctx}/getByPid.do?pid="+pid,function (res) {
            $("#shi").empty();//清理之前的数据
            for (let x in res) {
                $("#shi").append('<option value="' + res[x].id + '">' + res[x].name + '</option>');
            }
            $("#shi").val("${region.shi.id}");//回显市
        })
    }
    //根据选中的市获取县
    function getxian() {
        var pid= $("#shi").val();//获取选中的市的id
        //根据选中的市的id，查询市下的所有县
        $.post("${ctx}/getByPid.do?pid="+pid,function (res) {
            $("#xian").empty();//清理之前的数据
            for (let x in res) {
                $("#xian").append('<option value="' + res[x].id + '">' + res[x].name + '</option>');
            }
            $("#xian").val("${region.xian.id}");//回显县
            getqu();

        })
    }
    //根据县获取所有取，要以复选框显示
    function getqu() {
        var xid= $("#xian").val();//获取选中的县的id
        //根据选中的县的id，查询县下的所有区
        $.post("${ctx}/getTradings.do?xid="+xid,function (res) {
            $("#check4").empty();//清理之前的数据
            for (let x in res) {
                $("#check4").append('<input type="checkbox" name="tids" value="' + res[x].tid + '">'+res[x].tname);
            }
            //回显商圈
            <c:forEach items="${region.tradings}" var="var">
            $("[name='tids'][value='${var.tid}']").prop("checked",true);
            </c:forEach>

        })
    }
</script>
</body>
</html>
